import React,{useEffect,useState} from 'react';
import { Table, Tag, Space, Button, Switch, notification, message } from 'antd';
import { ColumnsType } from 'antd/es/table';
import {useNavigate} from 'react-router-dom';
import service  from '../../../api';
import _ from 'lodash';
import "./index.scss"
import Addbanner from '../Addbanner';



function Banner(props: any) {
  
  interface DataType {
    key: string;
    alt: string;
    bannerid: string;
    flag:boolean;
    link: string;
    img: string;
  }
  //获取轮播图列表
  const [bannerList, setBannerList] = useState([]);
  var requsetBannerList = async () => {
    var res = await service.banner.bannerList();
    console.log(res);
    setBannerList(res.data.data);
  }
  useEffect(() => {
    requsetBannerList();
  }, [])
  //修改轮播图状态
  const qianHuan = async(checked:any,bannerid:any) => {
    const res = await service.banner.bannerUpdatFlag({bannerid,flag:checked});
    if(res.data.code === "200"){
     message.destroy();
      message.success('修改成功');
      requsetBannerList();
    }
  }
  //删除轮播图
  const deleteBanner = async(bannerid:any) => {
    const res = await service.banner.bannerDelete({bannerid});
    console.log(res);
    if(res.data.code === "200"){
      message.destroy();
      message.success('删除成功');
      requsetBannerList();
    }
    //深拷贝
    var newBannerList = _.cloneDeep(bannerList);
    var index = newBannerList.findIndex((item:any)=>item.bannerid === bannerid);
    newBannerList.splice(index,1);
    setBannerList(newBannerList);
  }
  //添加轮播图
  const navigator = useNavigate();
  const Addbanner = () => {
    navigator('/index/addbanner');
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      key: 'index',
      dataIndex: 'index',
      render: (_,text,index) => <div>{index+1}</div>,
    },
    {
      title: '图片',
      key: 'pic',
      dataIndex: 'pic',
      render: (_, record,index) => <img src={record.img}  title='图被我吃了'/>,
    },
    {
      title:'链接',
      key:'link',
      dataIndex:'link',
      render: (_, record,index) => <a href={record.link} target='_blank' >图片链接</a>
    },
    {
      title: '提示',
      key: 'alt',
      dataIndex: 'alt',
      render: (_, record,index) => <div>{record.alt}</div>,
    },
    {
      title: '是否展示',
      key: 'qx',
      dataIndex: 'qx',
      render: (_, record,index) => <Switch checked={record.flag} onChange={(checked)=>qianHuan(checked,record.bannerid)}></Switch>
    },
    {
      title: '操作',
      key: 'change',
      render: (_, record,index) => (
        <div className='twoButtn'>
          <Button type='primary' size='small' danger={true} onClick={()=>deleteBanner(record.bannerid)}>删除</Button>
        </div>
      ),
    },
  ];
    return (
        <div className='bannerbiao'>
          <Button className='addbanner' type="primary" onClick={Addbanner}>添加轮播图+</Button>
          <Table className='bannerbg' rowKey='index'  columns={columns} dataSource={bannerList}  /> 
        </div>
    );
}

export default Banner;